<template>
	<view class="template-work tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF00">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="show = true">
				<!-- 图标logo -->
				<view class="custom-nav__back">
					<!-- 图片模式-->
					<view class="logo-pic tn-shadow-blur"
						style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
						<view class="logo-image">
						</view>
					</view>
				</view>
				<!-- 公司名称 -->
				<view class="tn-flex tn-flex-col-center" style="margin-left: 16rpx;width: 60vw;">
					<text class="tn-text-xl tn-color-white">亿润集团</text>
					<text class="tn-icon-down-triangle tn-color-white tn-padding-left-xs" style="opacity: 0.3;"></text>
				</view>
			</view>
		</tn-nav-bar>

		<view class="work-fixed" :style="{height: vuex_custom_bar_height + 'px;'}"
			style="background-image:url(https://resource.tuniaokj.com/images/oa/aa7.jpg);background-size: cover;overflow: hidden;z-index: 20076;min-height:120rpx">
		</view>

		<view class="top-backgroup">
			<image src='https://resource.tuniaokj.com/images/oa/aa7.jpg' mode='widthFix' class='backgroud-image'>
			</image>
		</view>

		<!-- 通知/搜索-->
		<view class="" style="margin-top: -220rpx;position: relative;">
			<!-- 当前页面进行搜索 -->
			<!-- <view class="" style="width: 100vw;padding: 10rpx 30rpx;">
        <view class="tn-flex tn-flex-col-center" style="border: 1rpx solid #3668fc00;border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;background-color: rgba(255,255,255,0.2);">
          <text class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-white tn-text-lg"></text>
          <input class="justify-content-item" placeholder="想搜点什么咧" name="input" placeholder-style="color:#FFFFFF" style="width: 100%;"></input>
        </view>
      </view> -->
			<!-- 跳转页面搜索-滚动搜索框 -->
			<!-- <view class="tn-classify__search--wrap">
				<view class=""
					style="color: #FFFFFFCC;margin: 20rpx 30rpx 0rpx 30rpx;border-radius: 100rpx;padding-left: 6rpx;background-color: rgba(248, 247, 248, 0.2);"
					@click="tn('/homePages/search')">
					<tn-notice-bar :list="searlist" mode="vertical" leftIconName="search"
						:duration="6000"></tn-notice-bar>
				</view>
			</view> -->
		</view>




		<swiper class="capsule-swiper" :circular="true" :autoplay="true" duration="600" interval="18000"
			@change="banner">
			<swiper-item v-for="(item,index) in bannerList" :key="index" :class="capCur==index?'cur':''"
				@click="tn('/homePages/about')">
				<view class="swiper-item image-banner">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				</view>
				<view class="swiper-item2 image-banner tn-shadow-blur"
					:style="'background-image:url('+ item.pngurl + ');width: 410rpx;height: 100%;background-size: cover;'">
				</view>
			</swiper-item>
		</swiper>
		<!-- <view class="indication3">
      <block v-for="(item,index) in bannerList" :key="index">
        <view class="spot3" :class="capCur==index?'active':''"></view>
      </block>
    </view> -->


		<view class="tn-padding-top-sm" v-if="1==2">
			<swiper class="card-swiper" :circular="true" :autoplay="false" duration="500" interval="5000"
				@change="cardSwiper">
				<swiper-item :class="cardCur==index?'cur':''">
					<!-- 方式5 start-->
					<view class="tn-flex tn-flex-wrap tn-padding-bottom">
						<block v-for="(item, index) in icons" :key="index">
							<view class="tn-margin-bottom tn-margin-top-sm" style="width: 25%;" @click="tn(item.url)">
								<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
									<!-- 当然，如果你有图片，可以换成图片模式 -->
									<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
                </view> -->
									<view
										class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
										:style="'background-color:'+ item.color +';'">
										<view :class="[`tn-icon-${item.icon}`]"
											style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">

										</view>
									</view>
									<view class="tn-color-gray--dark tn-text-center tn-text-df">
										<text class="tn-text-ellipsis">{{ item.title }}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
					<!-- 方式5 end-->
				</swiper-item>
				<swiper-item :class="cardCur==index?'cur':''">
					<!-- 方式5 start-->
					<view class="tn-flex tn-flex-wrap tn-padding-bottom">
						<block v-for="(item, index) in icons" :key="index">
							<view class="tn-margin-bottom tn-margin-top-sm" style="width: 25%;" @click="tn(item.url)">
								<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
									<!-- 当然，如果你有图片，可以换成图片模式 -->
									<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
                </view> -->
									<view
										class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
										:style="'background-color:'+ item.color +';'">
										<view :class="[`tn-icon-${item.icon}`]"
											style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
											<tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true"
												:fontSize="16" :translateCenter="false" top="-30rpx" right="-26rpx">
												<text>16</text>
											</tn-badge>
										</view>
									</view>
									<view class="tn-color-gray--dark tn-text-center tn-text-df">
										<text class="tn-text-ellipsis">{{ item.title }}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
					<!-- 方式5 end-->
				</swiper-item>
				<swiper-item :class="cardCur==index?'cur':''">
					<!-- 方式5 start-->
					<view class="tn-flex tn-flex-wrap tn-padding-bottom">
						<block v-for="(item, index) in icons" :key="index">
							<view class="tn-margin-bottom tn-margin-top-sm" style="width: 25%;" @click="tn(item.url)">
								<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
									<!-- 当然，如果你有图片，可以换成图片模式 -->
									<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
                </view> -->
									<view
										class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
										:style="'background-color:'+ item.color +';'">
										<view :class="[`tn-icon-${item.icon}`]"
											style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
											<tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true"
												:fontSize="16" :translateCenter="false" top="-30rpx" right="-26rpx">
												<text>12</text>
											</tn-badge>
										</view>
									</view>
									<view class="tn-color-gray--dark tn-text-center tn-text-df">
										<text class="tn-text-ellipsis">{{ item.title }}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
					<!-- 方式5 end-->
				</swiper-item>
			</swiper>
			<view class="indication">
				<block v-for="(item,index) in 3" :key="index">
					<view class="spot" :class="cardCur==index?'active':''"></view>
				</block>
			</view>
		</view>


		<view class="tn-strip-bottom"></view>

		<!-- 菜单-->



		<!-- 方式12 start-->
		<template v-for="(menusItem,index) in menus" v-if="menusItem.path=='/crm'">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
					{{menusItem.name}}
				</view>
			</view>
			<view class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
				<view v-for="(item, index) in menusItem.children" :key="index" style="width: 25%;">
					<view class="tn-margin-bottom tn-margin-top-sm" @click="tn('/'+item.component)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<!-- 当然，如果你有图片，可以换成图片模式 -->
							<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
	        </view> -->
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
								:style="'background-color:#957BFE;'">
								<view :class="[`tn-icon-${item.icon}`]"
									style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">

								</view>
							</view>
							<view class="tn-color-gray--dark tn-text-center tn-text-df">
								<text class="tn-text-ellipsis">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 标题-
		<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
				协同办公
			</view>
			<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
				<text class="tn-padding-xs">更多</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>
->
		<!-- 方式12 start-->
		<view class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white" v-if="1==2">
			<view v-for="(item, index) in synergy" :key="index" style="width: 25%;">
				<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<!-- 当然，如果你有图片，可以换成图片模式 -->
						<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
            </view> -->
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
							:style="'background-color:'+ item.color +';'">
							<view :class="[`tn-icon-${item.icon}`]"
								style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
								<tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true" :fontSize="16"
									:translateCenter="false" top="-30rpx" right="-26rpx">
									<text>16</text>
								</tn-badge>
							</view>
						</view>
						<view class="tn-color-gray--dark tn-text-center tn-text-df">
							<text class="tn-text-ellipsis">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<view class="tn-strip-bottom" v-if="1==2"></view>

		<!-- 标题-->
		<view v-if="1==2" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
				仪器设备
			</view>
			<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
				<text class="tn-padding-xs">更多</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>

		<!-- 方式12 start-->
		<view v-if="1==2" class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
			<view v-for="(item, index) in device" :key="index" style="width: 25%;">
				<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<!-- 当然，如果你有图片，可以换成图片模式 -->
						<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
            </view> -->
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
							:style="'background-color:'+ item.color +';'">
							<view :class="[`tn-icon-${item.icon}`]"
								style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
								<!-- <tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true" :fontSize="16" :translateCenter="false" top="-30rpx" right="-26rpx">
                  <text>16</text>
                </tn-badge> -->
							</view>
						</view>
						<view class="tn-color-gray--dark tn-text-center tn-text-df">
							<text class="tn-text-ellipsis">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<view v-if="1==2" class="tn-strip-bottom"></view>

		<!-- 标题-->
		<view v-if="1==2" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
				考勤统计
			</view>
			<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
				<text class="tn-padding-xs">更多</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>

		<!-- 方式12 start-->
		<view v-if="1==2" class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
			<view v-for="(item, index) in attendance" :key="index" style="width: 25%;">
				<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<!-- 当然，如果你有图片，可以换成图片模式 -->
						<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
            </view> -->
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
							:style="'background-color:'+ item.color +';'">
							<view :class="[`tn-icon-${item.icon}`]"
								style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
								<!-- <tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true" :fontSize="16" :translateCenter="false" top="-30rpx" right="-26rpx">
                  <text>16</text>
                </tn-badge> -->
							</view>
						</view>
						<view class="tn-color-gray--dark tn-text-center tn-text-df">
							<text class="tn-text-ellipsis">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->


		<view v-if="1==2" class="tn-strip-bottom"></view>

		<!-- 标题-->
		<view v-if="1==2" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
				费用报销
			</view>
			<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
				<text class="tn-padding-xs">更多</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>

		<!-- 方式12 start-->
		<view v-if="1==2" class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
			<view v-for="(item, index) in cost" :key="index" style="width: 25%;">
				<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<!-- <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.icon +');background-size:100% 100%;background-size: cover;'">
            </view> -->
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
							:style="'background-color:'+ item.color +';'">
							<view :class="[`tn-icon-${item.icon}`]"
								style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
								<!-- <tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true" :fontSize="16" :translateCenter="false" top="-30rpx" right="-26rpx">
                  <text>16</text>
                </tn-badge> -->
							</view>
						</view>
						<view class="tn-color-gray--dark tn-text-center tn-text-df">
							<text class="tn-text-ellipsis">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<view v-if="1==2" class="tn-strip-bottom"></view>


		<!-- 标题-->
		<view v-if="1==2" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
				智能看板
			</view>
			<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
				<text class="tn-padding-xs">更多</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>

		<!-- 方式12 start-->
		<view v-if="1==2" class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
			<view v-for="(item, index) in data" :key="index" style="width: 25%;">
				<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<!-- <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.icon +');background-size:100% 100%;background-size: cover;'">
            </view> -->
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
							:style="'background-color:'+ item.color +';'">
							<view :class="[`tn-icon-${item.icon}`]"
								style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
								<!-- <tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true" :fontSize="16" :translateCenter="false" top="-30rpx" right="-26rpx">
                  <text>16</text>
                </tn-badge> -->
							</view>
						</view>
						<view class="tn-color-gray--dark tn-text-center tn-text-df">
							<text class="tn-text-ellipsis">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<view v-if="1==2" class="tn-strip-bottom"></view>

		<!-- 标题-->
		<view v-if="1==2" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
				便捷工具
			</view>
			<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
				<text class="tn-padding-xs">更多</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>

		<!-- 方式12 start-->
		<view v-if="1==2" class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
			<view v-for="(item, index) in tool" :key="index" style="width: 25%;">
				<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<!-- <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.icon +');background-size:100% 100%;background-size: cover;'">
            </view> -->
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
							:style="'background-color:'+ item.color +';'">
							<view :class="[`tn-icon-${item.icon}`]"
								style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
								<!-- <tn-badge backgroundColor="#EA5E55" fontColor="#FFFFFF" :absolute="true" :fontSize="16" :translateCenter="false" top="-30rpx" right="-26rpx">
                  <text>16</text>
                </tn-badge> -->
							</view>
						</view>
						<view class="tn-color-gray--dark tn-text-center tn-text-df">
							<text class="tn-text-ellipsis">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<view v-if="1==2" class="tn-strip-bottom"></view>


		<!-- 标题-->
		<view v-if="1==2" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm" @click="tn('')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
				企业文化
			</view>
			<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
				<text class="tn-padding-xs">更多</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>

		<!-- 功能入口-->
		<view v-if="1==2"
			class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-top tn-margin-left tn-margin-right">
			<block v-for="(item, index) in tuniaoData" :key="index">
				<view
					class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white"
					:class="['tn-main-gradient-' + item.color + '--light']" @click="tn(item.url)">
					<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
						<!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center">
              <view :class="[`tn-icon-${item.icon}`]"></view>
            </view> -->
						<view class="tn-info__item__left__content">
							<view class="tn-info__item__left__content--title tn-text-bold"
								style="font-size: 32rpx;color: #080808;">{{ item.title }}</view>
							<view class="tn-info__item__left__content--data tn-padding-top-xs tn-color-grey">
								{{ item.value }}
								<text class="tn-icon-right tn-padding-left-xs"></text>
							</view>
						</view>
					</view>
					<view class="tn-info__item__right">
						<view class="tn-info__item__right--icon" :class="['tn-color-' + item.color]">
							<view :class="[`tn-icon-${item.icon}`]"
								style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.08);"></view>
						</view>
					</view>
					<view class="tn-info__item__bottom">
						<view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
							<text class="tn-icon-code tn-padding-right-xs" style="opacity: 0;"></text>
						</view>
					</view>
				</view>
			</block>
		</view>

		<view class="tn-strip-bottom"></view>

		<view class="tn-padding">
			<view class="button-number tn-flex tn-flex-row-between tn-flex-col-center"
				style="background: linear-gradient(-120deg, #99E3FE, #C9ECFF, #C9ECFF);">

				<view class="tn-margin-left">
					<view class="tn-flex tn-flex-col-center">
						<text class="tn-text-bold tn-text-xl" style="color: #0D80E8;">亿润集团OA</text>
					</view>
					<view class='tn-text-sm tn-margin-top-sm' style="color: #0D80E8;">团队，一对一定制</view>
				</view>
				<view class="tn-margin-right button-shake">
					<tn-button shape="round" backgroundColor="#3668FC" fontColor="#FFFFFF" padding="10rpx 0"
						width="160rpx" shadow open-type="contact">
						<text class="tn-text-bold">咨 询</text>
						<text class="tn-icon-right-fill tn-padding-left-xs tn-text-lg"></text>
					</tn-button>
				</view>

				<view class="tnwave waveAnimation">
					<view class="waveWrapperInner bgTop">
						<view class="wave waveTop"
							style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')">
						</view>
					</view>
					<view class="waveWrapperInner bgMiddle">
						<view class="wave waveMiddle"
							style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')">
						</view>
					</view>
					<view class="waveWrapperInner bgBottom">
						<view class="wave waveBottom"
							style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')">
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="">
			<tn-popup borderRadius="30" mode="top" v-model="show" :marginTop="vuex_custom_bar_height"
				:customStyle="customStyle">
				<view class="">
					<scroll-view scroll-y="true" style="max-height: 45vh;max-width: 640px;margin: 0 auto;">
						<view>
							<view class="tn-flex tn-flex-col-center" style="margin: 50rpx 30rpx;"
								v-for="(item,index) in 2" :key="index">
								<!-- <view class="">
                  <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light tn-color-blue">
                    <view class="tn-icon-company-fill"></view>
                  </view>
                </view> -->
								<view class="">
									<view class="company-pic"
										style="background-image:url('https://resource.tuniaokj.com/images/oa/OAlogo.png');">
										<view class="company-image">
										</view>
									</view>
								</view>
								<view class="tn-padding-left-sm" style="width: 100%;">
									<view class="tn-flex tn-flex-row-between tn-flex-col-between">
										<view class="justify-content-item">
											<text class="oa-black tn-text-lg">广州火箭文化科技有限公司</text>
										</view>

									</view>
									<view class="tn-padding-top-xs tn-text-ellipsis">
										<text class="tn-color-gray tn-text-sm tn-icon-trusty-fill"></text>
										<text class="tn-color-gray tn-text-sm" style="padding-left: 4rpx;">高级认证</text>
									</view>
								</view>
								<!-- <view class="">
                  <text class="oa-blue tn-text-lg tn-icon-check"></text>
                </view> -->
							</view>

							<view class="tn-flex tn-flex-col-center" style="margin: 50rpx 30rpx;">
								<!-- <view class="">
                  <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light tn-color-blue">
                    <view class="tn-icon-company-fill"></view>
                  </view>
                </view> -->
								<view class="">
									<view class="company-pic"
										style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png');">
										<view class="company-image">
										</view>
									</view>
								</view>
								<view class="tn-padding-left-sm" style="width: 100%;">
									<view class="tn-flex tn-flex-row-between tn-flex-col-between">
										<view class="justify-content-item">
											<text class="oa-black tn-text-lg">抓住那只猪科技有限公司</text>
										</view>

									</view>
									<view class="tn-padding-top-xs tn-text-ellipsis">
										<text class="oa-green tn-text-sm tn-icon-trusty-fill"></text>
										<text class="tn-color-gray tn-text-sm" style="padding-left: 4rpx;">高级认证</text>
									</view>
								</view>
								<view class="">
									<text class="oa-blue tn-text-lg tn-icon-check"></text>
								</view>
							</view>

							<view class="tn-flex tn-flex-col-center" style="margin: 50rpx 30rpx;"
								v-for="(item,index) in 12" :key="index">
								<!-- <view class="">
                  <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light tn-color-blue">
                    <view class="tn-icon-company-fill"></view>
                  </view>
                </view> -->
								<view class="">
									<view class="company-pic"
										style="background-image:url('https://resource.tuniaokj.com/images/oa/OAlogo.png');">
										<view class="company-image">
										</view>
									</view>
								</view>
								<view class="tn-padding-left-sm" style="width: 100%;">
									<view class="tn-flex tn-flex-row-between tn-flex-col-between">
										<view class="justify-content-item">
											<text class="oa-black tn-text-lg">广州火箭文化科技有限公司</text>
										</view>

									</view>
									<view class="tn-padding-top-xs tn-text-ellipsis">
										<text class="oa-green tn-text-sm tn-icon-trusty-fill"></text>
										<text class="tn-color-gray tn-text-sm" style="padding-left: 4rpx;">高级认证</text>
									</view>
								</view>
								<!-- <view class="">
                  <text class="oa-blue tn-text-lg tn-icon-check"></text>
                </view> -->
							</view>
						</view>
					</scroll-view>
					<!-- <view class="tn-text-center">
            <tn-button @click="show = false;">点击蒙层也可以关闭</tn-button>
          </view> -->
				</view>
			</tn-popup>
		</view>

		<view class="tn-tabbar-height"></view>

	</view>
</template>

<script>
	export default {
		name: 'Work',
		computed: {
			menus() {
				return this.$store.state.user.menus
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		data() {

			return {
				customStyle: {
					maxWidth: '640px',
					margin: '0 auto'
				},
				show: false,
				cardCur: 0,
				/* 胶囊轮播*/
				capCur: 0,
				bannerList: [{
					id: 0,
					type: 'image',
					url: 'https://resource.tuniaokj.com/images/capsule-banner/banner-tnmb.png',
				}, {
					id: 1,
					type: 'image',
					url: 'https://resource.tuniaokj.com/images/capsule-banner/banner-circle2.png',
				}, {
					id: 2,
					type: 'image',
					url: 'https://resource.tuniaokj.com/images/capsule-banner/banner-money.png',
				}],
				/* 搜索*/
				searlist: [
					'搜索 费用报销',
					'搜索 转正申请',
					'搜索 抓住那只猪'
				],
				/* 金刚区*/
				icons: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "考勤打卡",
						icon: 'location-fill',
						color: '#4B98FE',
						url: "/workPages/time"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "缺卡补卡",
						icon: 'time-fill',
						color: '#FFAC00',
						url: "/workPages/replace"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "费用报销",
						icon: 'money-fill',
						color: '#00D05E',
						url: "/workPages/cost"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764788499-assets/web-upload/4cf1bbab-efb8-401c-9a2d-21689d024491.png",
						title: "日周月报",
						icon: 'order-fill',
						color: '#FE871B',
						url: "/workPages/report"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764932311-assets/web-upload/c9380d70-1291-467e-89dd-40d2b799b986.png",
						title: "加班申请",
						icon: 'moon-fill',
						color: '#00C8B0',
						url: "/workPages/overtime"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764788528-assets/web-upload/955b13dd-7715-4627-b8cc-04ae3d85051a.png",
						title: "设备申请",
						icon: 'mouse-fill',
						color: '#00B9FE',
						url: "/workPages/device"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211145-assets/web-upload/98a55f9a-6188-4c95-a947-4d2db29bc08a.png",
						title: "出差申请",
						icon: 'suitcase-fill',
						color: '#FB6A67',
						url: "/workPages/travel"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764932305-assets/web-upload/8d5ff7dd-c2b0-4455-acf9-df6ba3a064b1.png",
						title: "请假申请",
						icon: 'calendar-fill',
						color: '#957BFE',
						url: "/workPages/leave"
					},
				],

				/* 协同*/
				synergy: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "文档资料",
						icon: 'folder-fill',
						color: '#00D05E',
						url: "/homePages/nav"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "项目立项",
						icon: 'block-fill',
						color: '#CC52E2',
						url: "/homePages/nav"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "客户管理",
						icon: 'stack',
						color: '#00B9FE',
						url: "/workPages/client"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "智能运营",
						icon: 'ai-fill',
						color: '#4B98FE',
						url: "/homePages/nav"
					}
				],
				/* 设备*/
				device: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "硬件管理",
						icon: 'hardware-fill',
						color: '#FFAC00',
						url: "/workPages/apparatus"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "办公物料",
						icon: 'assign-fill',
						color: '#4B98FE',
						url: "/workPages/machine"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "资源模组",
						icon: 'module-fill',
						color: '#CC52E2',
						url: "/homePages/nav"
					}
				],
				/* 考勤*/
				attendance: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "正常出勤",
						icon: 'reload-planet-fill',
						color: '#4B98FE',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "缺勤漏卡",
						icon: 'rocket-fill',
						color: '#FB6A67',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "休息请假",
						icon: 'meteor-fill',
						color: '#FFAC00',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764788499-assets/web-upload/4cf1bbab-efb8-401c-9a2d-21689d024491.png",
						title: "奋斗加班",
						icon: 'alien',
						color: '#957BFE',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764932311-assets/web-upload/c9380d70-1291-467e-89dd-40d2b799b986.png",
						title: "摆烂旷工",
						icon: 'skull-fill',
						color: '#CC52E2',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764788528-assets/web-upload/955b13dd-7715-4627-b8cc-04ae3d85051a.png",
						title: "居家办公",
						icon: 'notebook-fill',
						color: '#00B9FE',
						url: "/workPages/charts"
					}
				],
				/* 费用*/
				cost: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "餐费报销",
						icon: 'food-fill',
						color: '#FFAC00',
						url: "/workPages/cost"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "医疗报销",
						icon: 'covid-19-fill',
						color: '#00D05E',
						url: "/workPages/cost"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "物料报销",
						icon: 'iot-fill',
						color: '#CC52E2',
						url: "/workPages/cost"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764788499-assets/web-upload/4cf1bbab-efb8-401c-9a2d-21689d024491.png",
						title: "出差报销",
						icon: 'norm-fill',
						color: '#4B98FE',
						url: "/workPages/cost"
					}
				],

				/* 数据*/
				data: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "营销看板",
						icon: 'data-fill',
						color: '#4B98FE',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "库存看板",
						icon: 'statistics-fill',
						color: '#00B9FE',
						url: "/workPages/charts"
					}
				],

				/* 工具*/
				tool: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "任务列表",
						icon: 'bookmark-fill',
						color: '#00D05E',
						url: "/homePages/nav"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "问卷调查",
						icon: 'order-fill',
						color: '#00B9FE',
						url: "/workPages/questionnaire"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "活动参与",
						icon: 'flag-fill',
						color: '#4B98FE',
						url: "/homePages/nav"
					}
				],

				/* 关于*/
				tuniaoData: [{
						title: '文化使命',
						icon: 'image-text-fill',
						color: 'aquablue',
						value: '查看详情',
						url: '/workPages/culture'
					},
					{
						title: '发展历程',
						icon: 'signpost-fill',
						color: 'blue',
						value: '查看详情',
						url: '/workPages/history'
					},
					{
						title: '集体相册',
						icon: 'image-fill',
						color: 'indigo',
						value: '查看详情',
						url: '/workPages/photo'
					},
					{
						title: '宣传短片',
						icon: 'live-stream-fill',
						color: 'cyan',
						value: '查看详情',
						url: '/workPages/video'
					},
					{
						title: '荣誉证书',
						icon: 'trophy-fill',
						color: 'teal',
						value: '查看详情',
						url: '/workPages/honor'
					},
					{
						title: '公司地址',
						icon: 'map-fill',
						color: 'green',
						value: '查看详情',
						url: '/workPages/map'
					}
				],

			}
		},

		created() {

		},
		methods: {
			// resume
			banner(e) {
				this.capCur = e.detail.current
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 跳转
			tn(e) {
				this.pages.to(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-work {
		max-height: 100vh;
		max-width: 640px;
		margin: 0 auto;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;
		max-width: 640px;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}
	}

	/* 新增OA色系，自行调用，或者拿色值去用，多种方式*/
	.oa-black {
		color: #1D2541;
	}

	.oa-blue {
		color: #4B98FE;
	}

	.oa-orangeyellow {
		color: #FFAC00;
	}

	.oa-green {
		color: #00D05E;
	}

	.oa-orange {
		color: #FE871B;
	}

	.oa-cyan {
		color: #00C8B0;
	}

	.oa-indigo {
		color: #00B9FE;
	}

	.oa-orangered {
		color: #FB6A67;
	}

	.oa-purple {
		color: #957BFE;
	}

	// 四个角渐变底色
	.work-fixed {
		max-width: 640px;
		position: fixed;
		top: 0;
		width: 100%;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid #F8F7F8;
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F7F8;
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 90rpx;
				height: 90rpx;
				font-size: 60rpx;
				border-radius: 20rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}

	/* 企业列表头像 start */
	.company-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.company-pic {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1rpx solid #F8F7F8;
	}


	/* 头像*/
	.logo-image {
		width: 65rpx;
		height: 65rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	/* 自定义导航栏内容 end */

	/* 搜索栏 start */
	.tn-classify {

		&__search {
			&--wrap {}

			&__box {
				flex: 1;
				text-align: center;
				padding: 20rpx 30rpx;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 30rpx;
			}

			&__icon {
				padding-right: 10rpx;
			}

			&__text {
				padding-right: 10rpx;
			}
		}

		/* 搜索栏 end */
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 424rpx;
		max-height: 500rpx;
		overflow: hidden;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 424rpx;
			z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 轮播视觉差 start */
	.capsule-swiper {
		height: 260rpx !important;
		max-width: 640px;
	}

	.capsule-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		overflow: initial;
		max-width: 640px;
	}

	@media screen and (max-width:400px) {
		.capsule-swiper swiper-item {
			padding: 30rpx 10rpx 30rpx 10rpx;
		}
	}

	@media screen and (min-width:400px) {
		.capsule-swiper {
			margin: 40rpx 0 0 0;
		}
	}

	.capsule-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		transform: scale(0.8);
		transition: all 0.6s ease-in 0s;
		will-change: transform;
		// overflow: hidden;
	}

	.capsule-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.6s ease-in 0s;
		will-change: transform;
	}

	.capsule-swiper swiper-item .swiper-item-text {
		margin-top: -220rpx;
		text-align: center;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.capsule-swiper swiper-item.cur .swiper-item-text {
		margin-top: -220rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}


	/* 轮播指示点 start*/
	.indication3 {
		max-width: 640px;
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot3 {
		background-color: #000000;
		opacity: 0.1;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -40rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot3.active {
		opacity: 1;
		width: 30rpx;
		background-color: #000000;
		opacity: 0.1;
	}


	/* 金刚区轮播 start */
	.card-swiper {
		height: 470rpx !important;
		max-width: 640px;
	}

	.card-swiper swiper-item {
		width: 100% !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -300rpx;
		text-align: center;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -300rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		max-width: 640px;
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #000000;
		opacity: 0.1;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -70rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 0.15;
		width: 30rpx;
		background-color: #000000;
	}

	.image-pic {
		// border: 1rpx solid #F8F7F8;
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.blue-title::before {
		content: "";
		position: absolute;
		display: block;
		width: 80rpx;
		height: 26rpx;
		background: #269EFC;
		margin-top: 20rpx;
		margin-left: 70rpx;
		opacity: 0.09;
		z-index: -1;
		border-radius: 4rpx;
	}


	.icon12 {
		&__item {
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 56rpx;
				transform: rotate(-19deg);
				border-radius: 43% 57% 43% 57% / 57% 43% 57% 43%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1) rotate(19deg);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
				}
			}

		}
	}

	.icon13 {
		&__item {
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 56rpx;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);

				}

			}

		}
	}


	/* 工作区展示 start */
	.tn-info {

		&__container {
			margin-top: 10rpx;
			margin-bottom: 30rpx;
		}

		&__item {
			width: 47.7%;
			margin: 15rpx 0rpx 15rpx 0rpx;
			padding: 40rpx 30rpx;
			border-radius: 10rpx;


			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
			}

			&__left {

				&--icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					font-size: 40rpx;
					margin-right: 20rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
					}
				}

				&__content {
					font-size: 25rpx;

					&--data {
						color: rgba(255, 255, 255, 0.5);
						margin-top: 5rpx;
						// font-weight: bold;
					}
				}
			}

			&__right {
				&--icon {
					position: absolute;
					right: 0rpx;
					top: 50rpx;
					font-size: 80rpx;
					width: 108rpx;
					height: 108rpx;
					text-align: center;
					line-height: 60rpx;
					opacity: 0.6;
				}
			}

			// &__bottom {
			//   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
			//   border-radius: 0 0 10rpx 10rpx;
			//   position: absolute;
			//   width: 85%;
			//   line-height: 15rpx;
			//   left: 50%;
			//   bottom: -15rpx;
			//   transform: translateX(-50%);
			//   z-index: -1;
			//   text-align: center;
			// }
		}
	}

	/* 工作区展示 end */


	/* 广告*/

	.button-shake {
		animation: shake 4s infinite;
	}

	@keyframes shake {

		5%,
		50% {
			transform: scale(1);
		}

		10% {
			transform: scale(0.9);
		}

		15% {
			transform: scale(1.15);
		}

		20% {
			transform: scale(1.15) rotate(-5deg);
		}

		25% {
			transform: scale(1.15) rotate(5deg);
		}

		30% {
			transform: scale(1.15) rotate(-3deg);
		}

		35% {
			transform: scale(1.15) rotate(2deg);
		}

		40% {
			transform: scale(1.15) rotate(0);
		}
	}



	/* 背景波浪高度 */
	.button-number {
		width: 100%;
		height: 150rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;
	}

	/* 动态背景波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: -1;
		border-radius: 15rpx;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.1;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.2;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.3;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}
</style>